<template>
  <div class="active-wrap">
    <div class="act-img-box box ">
      <img :src="require('@/assets/images/PropertyPageImages/person1.png')"
           class="person1 animate__animated animate__bounceInRight">
      <img :src="require('@/assets/images/PropertyPageImages/person2.png')"
           class="person2 animate__animated animate__bounceInLeft">
      <img :src="require('@/assets/images/PropertyPageImages/person3.png')"
           class="person3 animate__animated animate__fadeInDown">
      <img :src="require('@/assets/images/PropertyPageImages/car.png')"
           class="car animate__animated animate__fadeInLeft">
      <img :src="require('@/assets/images/PropertyPageImages/gun.png')"
           class="gun animate__animated animate__flipInY">
      <img :src="require('@/assets/images/PropertyPageImages/helmet.png')"
           class="helmet animate__animated animate__fadeInBottomLeft">
    </div>
    <van-nav-bar title="伏地魔争霸赛活动报名"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft" />

    <div class="act-main-box">
      <van-cell-group>
        <van-field v-model="username"
                   label="姓名"
                   placeholder="请输入姓名"
                   style="background: rgb(0, 0, 0);"
                   label-class=".white-co" />
        <van-field v-model="usertel"
                   label="联系电话"
                   placeholder="请输入联系电话"
                   style="background: rgb(0, 0, 0);"
                   label-class=".white-co" />
      </van-cell-group>
      <span class="act-label-title">加入战队：</span>
      <van-radio-group v-model="radio"
                       class="act-radio-box">
        <van-radio class="act-radio-box"
                   name="1"
                   checked-color="#ff013c">和平精英队</van-radio>
        <van-radio class="act-radio-box"
                   name="2"
                   checked-color="#ff013c">刺激战场队</van-radio>
      </van-radio-group>
      <div class="btn-box">
        <button class="act-join-btn">AVAILABLE NOW</button>
      </div>
    </div>
    <div class="active-box">
      <div class="swiper-button-next music-btn"
           @click="close">
        <van-icon :name="musicIcon"
                  size="35px" />
      </div>
      <div class="
                  audio">
        <!--隐藏audio标签-->
        <audio autoplay="autoplay"
               id="music1">
          <source :src="require('@/assets/sound/mainSound.mp3')">
        </audio>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActiveRegistration',
  data () {
    return {
      musicIcon: 'music-o',
      username: '',
      usertel: '',
      radio: '1'
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    close () {
      var audio = document.getElementById('music1')
      if (audio.paused) {
        audio.play() // 播放
        this.musicIcon = 'music-o'
      } else {
        audio.pause()// 暂停
        this.musicIcon = 'play-circle-o'
      }
    }
  }
}
</script>
<style scoped>
.active-wrap {
  position: relative;
  z-index: 999;
  color: #fff;
  overflow: hidden;
  height: 100vh;
  /* 底下不知道为什么有个空白，好像是导航栏 */
  margin-bottom: -50px;
  background: rgb(0, 0, 0);
}
.van-nav-bar {
  background-color: #000;
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis,
::v-deep .van-radio__label,
::v-deep .van-field__control,
::v-deep .van-field__label {
  color: #fff;
}
.act-main-box {
  position: absolute;
  z-index: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.356);
}
.act-img-box {
  z-index: -1;
  position: absolute;
  height: 100%;
}
.act-radio-box {
  margin-left: 15px;
}
.act-radio-box {
  font-size: 14px;
  margin-bottom: 15px;
}
.music-btn {
  position: absolute;
  bottom: 5px;
  right: 10px;
}
.act-label-title {
  display: inline-block;
  font-size: 14px;
  margin: 10px 0px 10px 15px;
}
.person1 {
  position: absolute;
  bottom: 0px;
  left: 130px;
  width: 500px;
  height: 500px;
}
.person2 {
  position: absolute;
  bottom: 300px;
  left: 5px;
  width: 200px;
  height: 200px;
}
.person3 {
  position: absolute;
  top: 200px;
  left: 160px;
  width: 100px;
  height: 100px;
}
.gun {
  position: absolute;
  top: 80px;
  left: 60px;
  width: 300px;
  height: 100px;
}
.car {
  position: absolute;
  bottom: 290px;
  left: 20px;
  width: 200px;
  height: 130px;
}
.helmet {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
}
/* 加入战队按钮 */
.btn-box {
  margin-left: 80px;
  margin-top: 30px;
}
.act-join-btn,
.act-join-btn::after {
  position: relative;
  width: 250px;
  height: 46px;
  font-size: 14px;
  background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 46px;
  box-shadow: 6px 0px 0px #00e6f6;
  outline: transparent;
}
.act-join-btn::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 5% 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "AVAILABLE NOW";
  display: block;
  background: linear-gradient(
    45deg,
    transparent 3%,
    #00e6f6 3%,
    #00e6f6 3%,
    #ff013c 5%
  );
  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e5f6;
  clip-path: var(--slice-0);
}
.act-join-btn:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}
@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  20% {
    clip-path: var(--slice-3);
    transform: translate(10px, 0px);
  }
  50% {
    clip-path: var(--slice-5);
    transform: translate(40px, -10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-20px, -10px);
  }
  80% {
    clip-path: var(--slice-4);
    transform: translate(10px, -20px);
  }
  100% {
    clip-path: var(--slice-3);
    transform: translate(-10px, 10px);
  }
}
</style>
